<template>
  <div id="app">
    <!--    顶部搜索-->
    <div class="topSearch">
      <div style="font-size: 13px">区域：</div>
      <el-checkbox-group v-model="areaId" size="small" @change="getWareHouseData">
        <el-checkbox-button v-for="item in warehouseList" :key="item.area" :label="item.area">{{ item.areaName }}
        </el-checkbox-button>
      </el-checkbox-group>
      <div style="margin-left: 25px;font-size: 13px">时间：</div>
      <el-date-picker
          v-model="searchDate"
          end-placeholder="结束日期"
          range-separator="至"
          size="small"
          start-placeholder="开始日期"
          type="daterange"
          @change="selectTime">
      </el-date-picker>
      <div style="margin-left: 25px;font-size: 13px">店铺类型：</div>
      <el-select v-model="storeType" clearable placeholder="请选择" size="small">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button size="small" style="margin-left: 15px" type="primary" @click="getData('')"> 搜索</el-button>
    </div>
    <!--    中部数据-->
    <div class="centerData">
      <div class="left">
        <!--  purchaseData      -->
        <div class="cont">
          <p class="p"><span class="span"></span>采购数据</p>
          <div class="list" style="padding-left: 70px;box-sizing:content-box">
            <li style="width: 33%;">
              <img alt="" src="../../assets/img/totalPrice.png">
              <p style="margin-left: 10px"><span>总价</span>
                <span>0</span></p>
            </li>
            <li style="width: 33%">
              <img alt="" src="../../assets/img/totalCount.png">
              <p style="margin-left: 10px"><span>总数</span>
                <span>{{ dataBar.totalNumPurchase }}</span></p>
            </li>
            <li style="width: 33%">
              <img alt="" src="../../assets/img/inport.png">
              <p style="margin-left: 10px"><span>入库</span>
                <span>{{ dataBar.putStoragePurchase }}</span></p>
            </li>
          </div>
        </div>
        <!--     singlePortData   -->
        <div class="cont">
          <p class="p"><span class="span"></span>单品出库数据</p>
          <div class="list" style="padding-left: 70px;box-sizing:content-box">
            <li style="width: 33%">
              <img alt="" src="../../assets/img/outport.png">
              <p style="margin-left: 10px"><span>出库次数</span>
                <span>{{ dataBar.singleCount }}</span></p>
            </li>
            <li style="width: 33%">
              <img alt="" src="../../assets/img/count.png">
              <p style="margin-left: 10px"><span>出库单品数量</span>
                <span>{{ dataBar.singleNum }}</span></p>
            </li>
            <li style="width: 33%">
              <img alt="" src="../../assets/img/outportPrice.png">
              <p style="margin-left: 10px"><span>出库总价</span>
                <span>0</span></p>
            </li>
          </div>
        </div>
        <div class="cont">
          <p class="p"><span class="span"></span>盘点数据</p>
          <div class="list">
            <li>
              <div class="li">
                <p>动盘次数</p>
                <p>{{ dataBar.movingDiskCount }}</p>

              </div>
            </li>
            <span class="line" style="display: block;width: 1px;height: 25px;border-right: 1px solid #d1dbe5"></span>
            <li>
              <div class="li">
                <p>动盘差额</p>
                <p>0</p>

              </div>
            </li>
            <span class="line" style="display: block;width: 1px;height: 25px;border-right: 1px solid #d1dbe5"></span>
            <li>
              <div class="li">
                <p>静盘次数</p>
                <p>{{ dataBar.staticDisk }}</p>

              </div>
            </li>
            <span class="line" style="display: block;width: 1px;height: 25px;border-right: 1px solid #d1dbe5"></span>
            <li>
              <div class="li">
                <p>静盘差额</p>
                <p>0</p>

              </div>
            </li>
          </div>
        </div>
        <!--     afterSaleData   -->
        <div class="cont">
          <p class="p"><span class="span"></span>售后数据</p>
          <div class="list">
            <li>
              <div class="li">
                <p>总价</p>
                <p>0</p>
              </div>
            </li>
            <span class="line" style="display: block;width: 1px;height: 25px;border-right: 1px solid #d1dbe5"></span>
            <li>
              <div class="li">
                <p>总数</p>
                <p>{{ dataBar.afterSaleCount }}</p>

              </div>
            </li>
            <span class="line" style="display: block;width: 1px;height: 25px;border-right: 1px solid #d1dbe5"></span>
            <li>
              <div class="li">
                <p>待处理</p>
                <p>{{ dataBar.unStatusCount }}</p>

              </div>
            </li>
            <span class="line" style="display: block;width: 1px;height: 25px;border-right: 1px solid #d1dbe5"></span>
            <li>
              <div class="li">
                <p>已处理</p>
                <p>{{ dataBar.statusCount }}</p>

              </div>
            </li>
          </div>
        </div>
        <!--      checkData  -->
      </div>
      <div class="right">
        <div class="adjustData">
          <p class="p"><span class="span"></span>调货数据</p>
          <div class="list">
            <li>
              <div class="li">
                <p>调出总数</p>
                <p>{{ dataBar.pullCount }}</p>

              </div>
            </li>
            <span class="line" style="display: block;width: 1px;height: 25px;border-right: 1px solid #d1dbe5"></span>
            <li>
              <div class="li">
                <p>调出总价</p>
                <p>0</p>

              </div>
            </li>
            <span class="line" style="display: block;width: 1px;height: 25px;border-right: 1px solid #d1dbe5"></span>
            <li>
              <div class="li">
                <p>调入总数</p>
                <p>{{ dataBar.tuneInCount }}</p>

              </div>
            </li>
            <span class="line" style="display: block;width: 1px;height: 25px;border-right: 1px solid #d1dbe5"></span>
            <li>
              <div class="li">
                <p>调入总价</p>
                <p>0</p>

              </div>
            </li>
          </div>
        </div>
        <div class="storageData">
          <div style="display: flex;align-items: center;justify-content: space-between">
            <div style="display: flex">
              <p class="p"><span class="span"></span>仓库方管理运营数据</p>
              <p class="p">报销总金额：<span style="display: flex;flex-wrap: wrap;max-width: 400px"><span
                  v-for="item in dataBar.brandDataList"><span style="color:#666;margin-left: 10px"
                                                              v-if="item.date">{{ item.date }}:</span>{{
                  item.brandStoreMoney
                }}元</span> </span></p>
            </div>
            <div style="margin-right: 30px">
              <span>搜索条件：</span>
              <el-date-picker
                  type="months"
                  size="small"
                  value-format="yyyy-MM"
                  @change="changeDates"
                  style="margin-left: 10px"
                  v-model="monthCount"
                  placeholder="请选择月份 可多选">
              </el-date-picker>
            </div>
          </div>
          <div class="card">
            <li><p>里程数(系统)</p>
              <p v-for="item in dataBar.brandDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
                  item.brandKmTotal
                }}</a><span>公里</span><i>|</i><a>{{ item.brandKmCount }}</a><span>次</span>
              </p>
            </li>
            <li><p>订单货拉拉费用</p>
              <p v-for="item in dataBar.brandDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
                  item.brandAllMoney
                }}</a><span>元</span><i>|</i><a>{{ item.brandAllCount }}</a><span>次</span></p>
            </li>
            <li class="hover" style="width: 240px" @click="getChart(3,'内安装报销费用')"><p>内安装报销费用</p>
              <p v-for="item in dataBar.brandDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
                  item.inInstallationMoney
                }}</a><span>元</span><i>|</i><a>{{ item.inInstallationCount }}</a><span>次</span><i>|</i><a>{{
                  item.inInstallationStoreCount
                }}</a><span>店</span></p></li>
            <li class="hover" style="width: 260px;" @click="getChart(2,'外请安装费用')"><p>外请安装费用</p>
              <p v-for="item in dataBar.brandDataList">
                <span v-if="item.date">{{ item.date }}:</span>
                <a>{{
                    item.exInstallationMoney
                  }}</a><span>元</span><i>|</i><a>{{ item.exInstallationCount }}</a><span>次</span><i>|</i><a>{{
                  item.exInstallationStoreCount
                }}</a><span>店</span></p></li>
            <li class="hover" style="width: 240px" @click="getChart(1,'货拉拉到门店')"><p>货拉拉到门店</p>
              <p v-for="item in dataBar.brandDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
                  item.brandCargoMoney
                }}</a><span>元</span><i>|</i><a>{{ item.brandCargoCount }}</a><span>次</span><i>|</i><a>{{
                  item.brandCargoStoreCount
                }}</a><span>店</span>
              </p></li>
            <li class="hover" style="width: 240px" @click="getChart(5,'售后费用(仓库无责)')"><p>售后费用(仓库无责)</p>
              <p v-for="item in dataBar.brandDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
                  item.brandAfterSale
                }}</a><span>元</span><i>|</i><a>{{ item.brandAfterSaleCount }}</a><span>次</span><i>|</i><a>{{
                  item.brandAfterSaleStoreCount
                }}</a><span>店</span></p></li>
            <li class="hover" style="width: 240px" @click="getChart(4,'售后费用(仓库责任)')"><p>售后费用(仓库责任)</p>
              <p v-for="item in dataBar.brandDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
                  item.brandDoorMoney
                }}</a><span>元</span><i>|</i><a>{{ item.brandDoorCount }}</a><span>次</span>
                <i>|</i><a>{{ item.brandDoorStoreCount }}</a><span>店</span></p>
            </li>
            <li><p>驳回次数</p>
              <p v-for="item in dataBar.brandDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
                  item.brandUnPassMoney
                }}</a><span>元</span><i>|</i><a>{{
                  item.brandUnPassCount
                }}</a><span>次</span></p></li>
          </div>
          <div class="chart">
            <echart v-if="newStoreSales.xAxis.data" :echartsData="newStoreSales"
                    style="height: 100%;"></echart>
          </div>
        </div>
      </div>

    </div>
    <div class="bottomChart">
      <div style="display: flex;align-items: center"><p class="p"><span class="span"></span>仓库费用数据</p>
        <p class="p">报销总金额：<span style="display: flex;flex-wrap: wrap;max-width: 400px"><span
            v-for="item in dataBar.areaDataList"><span style="color:#666;margin-left: 10px"
                                                       v-if="item.date">{{ item.date }}:</span>{{
            item.areaTotal
          }}元</span> </span></p>
      </div>
      <div class="card2">
        <li class="hover" @click="getLine(1,'采购费用')"><p>采购费用</p>
          <p v-for="item in dataBar.areaDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
              item.areaPurchaseMoney
            }}</a><span>元</span><i>|</i><a>{{ item.areaPurchaseCount }}</a><span>次</span></p>
        </li>
        <li class="hover" @click="getLine(9,'工厂质量问题(工厂)')"><p>工厂质量问题(工厂)</p>
          <p v-for="item in dataBar.areaDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
              item.areaQualityMoney
            }}</a><span>元</span><i>|</i><a>{{ item.areaQualityCount }}</a><span>次</span></p></li>
        <li class="hover" @click="getLine(10,'少发漏发错发(仓库)')"><p>少发漏发错发(仓库)</p>
          <p v-for="item in dataBar.areaDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
              item.areaLessMoney
            }}</a><span>元</span><i>|</i><a>{{ item.areaLessCount }}</a><span>次</span></p></li>
        <li class="hover" @click="getLine(11,'安装细节问题(安装)')"><p>安装细节问题(安装)</p>
          <p v-for="item in dataBar.areaDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
              item.areaInstallMoney
            }}</a><span>元</span><i>|</i><a>{{
              item.areaInstallCount
            }}</a><span>次</span></p></li>
        <li class="hover" @click="getLine(12,'店铺尺寸问题')"><p>店铺尺寸问题</p>
          <p v-for="item in dataBar.areaDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
              item.areaSizeMoney
            }}</a><span>元</span><i>|</i><a>{{
              item.areaSizeCount
            }}</a><span>次</span></p></li>
        <li class="hover" @click="getLine(2,'快递货拉拉到前月店铺费用')"><p>到前月店铺(货拉拉)</p>
          <p v-for="item in dataBar.areaDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
              item.areaCargoStoreMoney
            }}</a><span>元</span><i>|</i><a>{{ item.areaCargoStoreCount }}</a><span>次</span></p></li>
        <li class="hover" @click="getLine(13,'安装好后人为破坏')"><p>安装好后人为破坏</p>
          <p v-for="item in dataBar.areaDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
              item.areaDamageMoney
            }}</a><span>元</span><i>|</i><a>{{ item.areaDamageCount }}</a><span>次</span></p></li>
        <li class="hover" @click="getLine(3,'生活费用(房租、吃饭)出差费用(车票、住宿)')"><p>生活费+出差</p>
          <p v-for="item in dataBar.areaDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
              item.areaLifeMoney
            }}</a><span>元</span><i>|</i><a>{{ item.areaLifeCount }}</a><span>次</span></p></li>
        <li class="hover" @click="getLine(4,'快递货拉拉到零食很忙总部跟零食很忙各仓费用')"><p>货拉拉(赵一鸣)</p>
          <p v-for="item in dataBar.areaDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
              item.areaCargoMoney
            }}</a><span>元</span><i>|</i><a>{{ item.areaCargoCount }}</a><span>次</span></p></li>

        <li class="hover" @click="getLine(5,'请临时工费用')"><p>临时工(仓库)</p>
          <p v-for="item in dataBar.areaDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
              item.areaTempMoney
            }}</a><span>元</span><i>|</i><a>{{
              item.areaTempCount
            }}</a><span>次</span></p></li>
        <li class="hover" @click="getLine(6,'工厂到仓库运费')"><p>工厂到仓库运费</p>
          <p v-for="item in dataBar.areaDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
              item.areaShelfMoney
            }}</a><span>元</span><i>|</i><a>{{ item.areaShelfCount }}</a><span>次</span></p></li>
        <li class="hover" @click="getLine(7,'月租金(仓库)')"><p>月租金(仓库)</p>
          <p v-for="item in dataBar.areaDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
              item.areaRentMoney
            }}</a><span>元</span><i>|</i><a>{{ item.areaRentCount }}</a><span>次</span></p></li>
        <li class="hover" @click="getLine(8,'缺货')"><p>缺货</p>
          <p v-for="item in dataBar.areaDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
              item.areaLackMoney
            }}</a><span>元</span><i>|</i><a>{{
              item.areaLackCount
            }}</a><span>次</span></p></li>
        <li class="hover" @click="getLine(14,'其他')"><p>其他</p>
          <p v-for="item in dataBar.areaDataList"><span v-if="item.date">{{ item.date }}:</span><a>{{
              item.areaOtherMoney
            }}</a><span>元</span><i>|</i><a>{{ item.areaOtherCount }}</a><span>次</span></p></li>
        <li style="background-color:#fff;"></li>
        <li style="background-color:#fff;"></li>
      </div>
      <div class="chart2">
        <!--                    <echart id="warehouseChart" :echartsData="newStoreSales" v-if="newStoreSales.xAxis[0].data"-->
        <!--                            style="height: 100%;"></echart>-->
        <echart v-if="newWareHouse.xAxis.data" :echartsData="newWareHouse"
                style="height: 100%;"></echart>
      </div>
    </div>
    <div class="aftersaleChart">
      <div style="display: flex;"><p class="p"><span class="span"></span>售后详情</p>
        <p style="margin-top: 12px;margin-left: 100px;font-size: 13px" v-if="searchDate"><span v-if="endTime"
                                                                                               style="margin-right: 20px">时间：{{
            startTime + '/' + endTime
          }}</span><span v-if="areaId.toString()">仓库：</span><span v-for="item in areaId">
        <a v-if="item==43" style="margin-right: 20px">宁乡壹</a>
        <a v-if="item==44" style="margin-right: 20px">广东</a>
        <a v-if="item==45" style="margin-right: 20px">广西</a>
        <a v-if="item==52" style="margin-right: 20px">贵州</a>
        <a v-if="item==53" style="margin-right: 20px">云南</a>
        <a v-if="item==56" style="margin-right: 20px">西安2仓</a>
      </span></p></div>
      <div class="inner">
        <echart v-if="afterSalePie" :echartsData="afterSalePie"
                style="height: 100%;margin-top: 40px;width: 50%;margin-left: -50px"></echart>
        <div style="display: flex;flex-wrap: wrap;width: 50%;font-size: 12px;height:300px;position: absolute;left: 50%
">
          <div v-for="item in jsonArr" style="width: calc((100% - 20px) / 2);"><span style="color: #4235D5">{{
              item.name
            }}</span> <span style="color: #FF1493;margin-left: 10px">{{ item.value + '%' }}</span></div>
        </div>
      </div>
    </div>
    <div class="cadCount">
      <p>
        <span>图片识别次数：{{ cadCount.imgAnalysisCount }}</span>
        <span>图片识别错误次数：{{ cadCount.imgAnalysisErrorCount }}</span>
        <span>图片识别错误率：{{ cadCount.imgAnalysisErrorRate+'%' }}</span>
      </p>
      <p>
        <span>dxf识别次数：{{ cadCount.dxfAnalysisCount }}</span>
        <span>dxf识别错误次数：{{ cadCount.dxfAnalysisErrorCount }}</span>
        <span>dxf识别错误率：{{ cadCount.dxfAnalysisErrorRate+'%' }}</span>
      </p>

    </div>
    <!--    底部图表-->

  </div>
</template>

<script>
import dayjs from "dayjs";
import echart from "@/RayComponents/echart.vue";

export default {
  name: "dataContact",
  components: {
    echart,
  },
  data() {
    return {
      areaId: [],
      flag: "",
      searchTips: "默认",
      yearsCount: "",
      monthCount: "",
      cadCount: {},
      dayCount: "",
      warehouseList: [],
      newSalesData: [],
      title1: "",
      jsonArr: "",
      outInstallDate: [],
      outInstallCount: [],
      afterSalePie: null,
      searchDate: "",
      storeType: "",
      startTime: "",
      dataBar: {},
      endTime: "",
      options: [{
        value: '1',
        label: '新增店铺'
      }, {
        value: '2',
        label: '老店翻新'
      }],
      newStoreSales: {
        title: {
          text: '仓库费用数据统计图',
          left: "center",
          textStyle: {
            fontSize: 12, // 设置主标题的字号
            fontWeight: 'bold', // 设置标题字体加粗
            color: '#333' // 设置标题颜色
          },
        },
        grid: {
          x: 0,
          y: 45,
          x2: 0,
          y2: 0,
          containLabel: true
        },

        tooltip: {
          trigger: "axis"
        },
        calculable: true,
        xAxis: {
          type: 'category',
          data: this.outInstallDate,
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
        },
        toolbox: {
          feature: {
            magicType: {show: true, type: ['line', 'bar']},
          }
        },
        series: [{
          data: this.outInstallCount,//let areaNames = mapWarehouseList.map(item => item.areaName);
          type: 'bar',
          barWidth: 20,
          label: {
            show: true, // 开启显示
            position: 'top', // 数据标签位置（上方）
            formatter: '{c}', // 数据显示格式，{c} 表示数据值
            fontSize: 12, // 字体大小
            color: '#2653f6' // 字体颜色
          },
          itemStyle: {
            borderRadius: [10, 10, 0, 0], // 上圆角
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: "#2653F6"},
              {offset: 0.5, color: "#3740E2"},
              {offset: 1, color: "#4235D5"},
            ]),
          },


        }]
      },
      newWareHouse: {
        title: {
          text: '仓库费用数据统计图(月)',
          left: "center",
          textStyle: {
            fontSize: 12, // 设置主标题的字号
            fontWeight: 'bold', // 设置标题字体加粗
            color: '#333' // 设置标题颜色
          },
        },
        grid: {
          x: 0,
          y: 45,
          x2: 0,
          y2: 0,
          containLabel: true
        },

        tooltip: {
          trigger: "axis"
        },
        calculable: true,
        xAxis: {
          type: 'category',
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
        },
        toolbox: {
          feature: {
            magicType: {show: true, type: ['line', 'bar']},
          }
        },
        series: [{
          data: [5, 20, 36, 10, 10, 20],//let areaNames = mapWarehouseList.map(item => item.areaName);
          type: 'line',
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: "#2653F6"},
              {offset: 0.5, color: "rgba(59,59,219,0.3)"},
              {offset: 1, color: "rgba(59,59,219,0.1)"},
            ]),
          },
          smooth: true,
          barWidth: 20,
          itemStyle: {
            borderRadius: [10, 10, 0, 0], // 上圆角
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: "#2653F6"},
              {offset: 0.5, color: "#3740E2"},
              {offset: 1, color: "#4235D5"},
            ]),
          },


        }]
      },
    }
  },
  created() {
    this.$api.areaLedgerAreaList().then(res => {
      this.warehouseList = res
    })
    this.getData(this.areaId)
    this.$api.newCadGetRecordUsage().then(res => {
      console.log(res, "cadjiexi")
      this.cadCount = res
    })
  },
  methods: {
    handleCommand(command) {
      const commandMap = {
        year: () => {
          this.searchTips = '年-年'
          this.flag = 1
        },
        month: () => {
          this.searchTips = '月-月'
          this.flag = 2
        },
        yMd: () => {
          this.searchTips = '年-月-日'
          this.flag = 3
        },

      }
      if (commandMap[command]) {
        commandMap[command]()
      } else {
        console.warn(`未处理的 command: ${command}`)
      }
    },
    changeDates(val) {
      // val = val.map(el => {
      //   return el.replaceAll("-", ",");
      // });
      const params = {
        monthList: val,
        storeType: this.storeType,
        flag: 1,
        startTime: "",
        endTime: "",
        areaIds: this.areaId,
      }
      if (!val) {
        delete params.flag
        delete params.monthList
      }
      this.$api.dashboardsGetPurchaseData(params).then(res => {
        if (res.key == null) {
          res.key = 0
        }
        res.brandDataList = res.brandDataList.map(item => {
          // 遍历对象的所有键
          for (let key in item) {
            if (item[key] === null) {
              item[key] = 0;
            }
          }
          return item;
        });
        this.dataBar = res
      })
    },
    getWareHouseData(val) {
      this.areaId = val
      this.getData(val)
    },
    async getSaleAfter() {
      this.afterSalePie = null
      const params = {
        startTime: this.startTime,
        endTime: this.endTime,
        storeType: this.storeType,
        areaIds: this.areaId,
        flag: this.flag
      };
      const res = await this.$api.dashboardsGetAfterSaleInfo(params)
      let jsonArr = [];
      var keyArr = res.afterSaleType;
      var valueArr = res.afterSaleRatio;
      for (var i = 0; i < keyArr.length; i++) {
        var json = {};
        for (var j = 0; j < valueArr.length; j++) {
          if (i == j) {
            json.value = valueArr[j];
            json.name = keyArr[i];
            jsonArr.push(json);
          }
        }
      }
      this.jsonArr = jsonArr
      this.afterSalePie = {
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   left: 'center',
        //   top: 'bottom',
        //   textStyle: {
        //     color: '#a6cdff',
        //   }
        // },
        title: {
          text: '( 百分比% )',
          left: "center",
          textStyle: {
            fontSize: 12, // 设置主标题的字号
            color: '#333' // 设置标题颜色
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '50%'],
            avoidLabelOverlap: false,
            center: ['55%', '40%'],
            data: jsonArr,
            itemStyle: {
              normal: {
                label: {
                  textStyle: {
                    color: '#4235D5'
                  }
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 1)'
              }
            }
          }
        ]
      };
    },
    getData(val) {
      this.newStoreSales.title.text = '仓库方管理运营数据统计图(月)'
      this.newStoreSales.xAxis.data = null
      this.newStoreSales.series[0].data = null
      this.newWareHouse.title.text = '仓库费用数据统计图(月)'
      this.newWareHouse.xAxis.data = null
      this.newWareHouse.series[0].data = null
      this.monthCount = ''
      const params = {
        startTime: this.startTime,
        endTime: this.endTime,
        storeType: this.storeType,
        areaIds: this.areaId,
      }
      this.$api.dashboardsGetPurchaseData(params).then(res => {
        if (res.key == null) {
          res.key = 0
        }
        this.dataBar = res
      })
      this.$api.dashboardsGetBrandHistogramData(params).then(res => {
        this.newStoreSales.xAxis.data = res.dateList
        this.newStoreSales.series[0].data = res.brandHistogramList
      })
      this.$api.dashboardsGetAreaLineChart(params).then(res => {
        this.newWareHouse.xAxis.data = res.dateList
        this.newWareHouse.series[0].data = res.brandHistogramList
      })
      this.getSaleAfter()
    },
    getChart(val, text) {
      this.financeId = val
      this.newStoreSales.xAxis.data = null
      this.newStoreSales.series[0].data = null
      this.newStoreSales.title.text = this.startTime + '-' + this.endTime + '数据统计图(月)'
      const data = {
        startTime: this.startTime,
        endTime: this.endTime,
        storeType: this.storeType,
        areaIds: this.areaId,
        financeId: this.financeId || "",
      }
      if (text != this.searchTips) {
        delete data.flag
        data.startTime = ''
        data.endTime = ''
        this.flag = ""
        this.searchTips = '默认'
        this.newStoreSales.title.text = text + '数据统计图(月)'
      }
      this.$api.dashboardsGetBrandHistogramData(data).then(res => {
        this.newStoreSales.xAxis.data = res.dateList
        this.newStoreSales.series[0].data = res.brandHistogramList
      })
    },
    getLine(val, text) {
      this.newStoreSales.title.text = text + '数据统计图(月)'
      this.newWareHouse.xAxis.data = null
      this.newWareHouse.series[0].data = null
      const data = {
        startTime: this.startTime,
        endTime: this.endTime,
        storeType: this.storeType,
        areaIds: this.areaId,
        type: val
      }
      this.$api.dashboardsGetAreaLineChart(data).then(res => {
        this.newWareHouse.xAxis.data = res.dateList
        this.newWareHouse.series[0].data = res.brandHistogramList
      })
    },


    selectTime(val) {
      if (val) {
        this.startTime = dayjs(val[0]).format("YYYY-MM-DD");
        this.endTime = dayjs(val[1]).format("YYYY-MM-DD");
      } else {
        this.startTime = ''
        this.endTime = ''
      }
    },
  }
}
</script>
<style>
</style>
<style lang="less" scoped>
#app {
  overflow: auto;
  padding-left: 11px;
  padding-right: 15px;
}

.topSearch {
  display: flex;
  align-items: center;
  font-size: 16px;
  flex-wrap: wrap;

  .el-radio-group {
    margin-bottom: 0 !important;
  }
}

.centerData {
  margin-top: 20px;
  display: flex;

  .left {
    width: 40%;

    .cont {
      border-radius: 10px;
      height: 25%;
      margin-bottom: 10px;
      box-shadow: 2px 2px 20px 2px rgba(192, 192, 192, 0.2);
    }


  }

  .list {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    span {
      //background-color: red;
    }

    .li {
      display: flex;
      flex-direction: column;
      //width: 200px;
      align-items: center;

      p:nth-child(1) {
        color: #82848a;
        font-size: 12px;
      }
    }

    li {
      list-style: none;
      display: flex;

      p {
        display: flex;
        flex-direction: column;

        span:nth-child(1) {
          color: #82848a;
          font-size: 12px;
        }
      }

      img {
        width: 35px;
        height: 35px;
      }
    }
  }

  .right {
    width: 60%;
    margin-left: 10px;
    height: 100%;

    .adjustData {
      border-radius: 10px;
      height: 100px;
      margin-bottom: 10px;
      box-shadow: 2px 2px 20px 2px rgba(192, 192, 192, 0.2);
    }

    .storageData {
      border-radius: 10px;
      padding-left: 10px;
      box-sizing: border-box;
      min-height: 84%;
      padding-bottom: 20px;
      box-shadow: 2px 2px 20px 2px rgba(192, 192, 192, 0.2);
    }
  }
}

.card, .card2 {
  display: flex;
  flex-wrap: wrap;

  i {
    color: #d1dbe5;
    margin-right: 8px
  }

  li {
    text-align: center;
    margin-bottom: 10px;
    width: 170px;
    min-height: 55px;
    border-radius: 5px;
    background-color: rgba(204, 224, 254, 0.5);
    list-style: none;

    p {
      color: #82848a;
      margin-bottom: 5px;
      font-size: 13px;
      margin-top: 4px;
    }

    span {
      color: #82848a;
      font-size: 11px;
      margin-right: 8px;
    }
  }

}

.card li {
  width: calc((100% - 50px) / 5);
  margin-right: 10px;
}

.card2 li {
  width: calc(100% / 9);
  margin-right: 10px;
  margin-left: 10px;
}

.bottomChart {
  border-radius: 10px;
  min-height: 500px;
  width: 100%;
  margin-top: 40px;
  padding-left: 10px;
  box-sizing: border-box;
  box-shadow: 2px 2px 20px 2px rgba(192, 192, 192, 0.2);
}

.aftersaleChart {
  border-radius: 10px;
  height: 600px;
  width: 100%;
  margin-top: 20px;
  box-shadow: 2px 2px 20px 2px rgba(192, 192, 192, 0.2);
  margin-bottom: 15px;

  .inner {
    width: 100%;
    height: 100%;
    display: flex;
  }
}

.p {
  display: flex;
  align-items: center;
  padding: 10px;
  color: #1E90FF;
  font-weight: bold;

  .span {
    display: block;
    width: 3px;
    height: 18px;
    border-radius: 2px;
    margin-right: 5px;
    background-color: #1E90FF;
  }
}

.chart2 {
  height: 300px;
  padding: 10px;
}

.chart {
  height: 220px;
}

.hover:hover {
  background-color: rgba(70, 60, 236, 0.2);
}

.cadCount {
  width: 100%;
  background-color: #fff;

  span {
    display: inline-block;
    width: 200px;
  }

  p {
    margin-bottom: 15px;
  }
}
</style>